<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数组的一些常用方法与实现原理</title>
  </head>
  <body>
    <script>
      let array = ["str", true, 12, [], {}];
      console.log(array);

      //    slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。
      // 原始数组不会被改变。

      let one_slice = array.slice(2);
      console.log(one_slice); // slice只取一个参数 表示从当前索引开始提取到最后一个元素

      let no_slice = array.slice();
      console.log(no_slice); //  slice 不写参数，和原数组相同

      let normal_slice = array.slice(1, 4);
      console.log(normal_slice); // slice 两个参数，左取到，右取不到（索引）

      let arr = [
        "World Wide Web",
        "BigData",
        "software test",
        "fifth-generation",
        "internet of Things",
        "computer network",
      ];
      // splice的使用

      // splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。
      let normal_splice = arr.splice(0, 3); //  从第索引为0的第一个元素开始截取三个
      console.log(normal_splice); // 返回的是截取后的数组，会改变原数组

      let replace_splice = arr.splice(1, 0, "computer science");
      console.log(arr);
      console.log(replace_splice);

      let deleteElement = arr.splice(2); // 从索引2开始删除所有元素

      // 封装一个移动数组元素的案例

      function moveArray(arr3, from, to) {
        if (from < 0 || to >= arr3.length) {
          console.error("参数错误");
          return;
        }

        const newArray = [...arr3];

        let item = newArray.splice(from, 1);
        newArray.splice(to, 0, ...item);
        return newArray;
      }
      let arr3 = [1, 2, 3, 4, 5];
      console.log(moveArray(arr3, 1, 4));

      // 清空数组的几种方式
      let hd = [1, 2, 3, 4, 5];
      // hd.length =0    //改变原来内存的数据不产生新数组
      console.log(hd); // 长度为0
      // hd = []   // 赋空值
      console.log(hd);
      // hd.splice(0) // 从第0个开始清除
      console.log(hd);
      // while(hd.pop()){}  // 循环清除
      console.log(hd);

      let arr4 = hd; // 传值操作
      hd = []; // 开辟空间把空数组赋值给hd
      console.log(hd);
      console.log(arr4); // 传递内存地址，而没有传值

      let arr5 = ["王庆龙", "潘冲", "萧天佐"];
      let arr6 = arr5;
      arr6.length = 0;
      console.log(arr6); // 将数组长度设置为0，即为空数组 arr5,arr6为空数组
      console.log(arr5);

      let arr7 = arr5;
      arr7 = [];
      console.log("arr5", arr5); // 元素不变
      console.log("arr7", arr7); // 空数组

      //   split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。
      let str1 = "Hello,World";
      console.log(str1.split(",", 1)); // 以逗号分隔，取一个为字符串数组

      // 数组的拆分
      console.log("数组的拆分与合并");
      customary_str = "Hel|lo|Wor|ld";
      now_str = customary_str.split("|"); // split 返回数组 ，按，分隔
      console.log(typeof now_str);
      console.log(now_str);

      let continueReturn = now_str.join("-"); //  join() 方法用于把数组中的所有元素转换一个字符串。

      // 元素是通过指定的分隔符进行分隔的。

      console.log(continueReturn);

      //    数组的合并
      let startArr = ["HTML", "CSS", "JS"];
      let endArr = ["Angula", "React", "Vue"];
      let realizationArr = ["mobile", "PC"];

      startArr = startArr.concat(endArr);
      console.log(startArr);
      let viewArr = [...startArr, ...realizationArr]; // 新特性，展开语法
      console.log(viewArr);

      // 复制到哪里 ，从哪里开始， 从哪里结束
      let technologyArr = [
        "javaSE",
        "JavaWeb",
        "JDBC",
        "SSM",
        "SpringBoot",
        "SpringClound",
      ];
      console.log(technologyArr);
      new_teachologyArr = technologyArr.copyWithin(0, 2, 4);
      console.log(new_teachologyArr);
      console.log(technologyArr); // copyWithin会改变原数组

      // 查找元素  旧：indexOf（） 返回数组中元素的索引
      let browser = ["iE", "MicroSoft Edge", "fireFox", "chrome", "iE"];
      console.log(browser.indexOf("iE", -1)); // 第二个参数表示从哪里找
      console.log(browser.lastIndexOf("iE")); // lastIndexOf 表示从右往左查找

      console.log(browser.includes("fireFox"));
      // 新 includes 返回布尔值

      // includes 实现原理

      let includesArr = [1, 3, 4, 5, 6, 76, 3, 542, 23, 13];
      function includes(includesArr, find) {
        for (const value of includesArr) if (value === find) return true;
        return false;
      }

      console.log(includes(includesArr, 3));
      // includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

      // find 查找值
      // find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
      let arrvalue = [1, 2, 3, 4, 5];
      // let Value=arrvalue.find(function(value){
      //     return value>3
      // })
      let Value = arrvalue.find((value) => value > 3);
      console.log(Value);

      let arrObj = [{ name: "js" }, { name: "css" }, { name: "html" }];
      let state = arrObj.find(function (item) {
        return item.name == "css";
      });
      console.log(state);

      // findIndex找索引
      // findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
      let state_Index = arrObj.findIndex((item) => item.name == "html");
      console.log(state_Index);
    </script>
  </body>
</html>
